<template>
  <div id="app" class="bg">
    
    <h2>用户 {{ userNickName }} 参与的订单</h2>

    <br />
    <el-main>
      <el-table
        :data="tableData"
        border
        stripe
        :header-cell-class-name="headerBg"
      >
        <el-table-column prop="email" label="用户账号" align="center">
        </el-table-column>
        <el-table-column prop="orderId" label="订单编号" align="center">
        </el-table-column>
        <el-table-column prop="goods_name" label="商品名字" align="center">
        </el-table-column>
        <el-table-column prop="goodsCount" label="下单数量" align="center">
        </el-table-column>

        <el-table-column prop="is_seckillorder" label="订单属性" align="center">
        </el-table-column>
        <el-table-column prop="orderPrice" label="订单金额" align="center">
        </el-table-column>
        <el-table-column prop="address" label="收货地址" align="center">
        </el-table-column>
        <el-table-column prop="createTime" label="订单创建日期" align="center">
        </el-table-column>
        <el-table-column prop="orderStatus" label="订单状态" align="center">
        </el-table-column>
        <el-table-column prop="orderStatus" label="操作订单" align="center">
          <template slot-scope="scope">
            <el-button
              type="success"
              slot="reference"
              size="mini"
              @click="doActive()"
              >去支付订单
            </el-button>

            <el-popconfirm
              class="ml-5"
              confirm-button-text="确定取消"
              cancel-button-text="再让我想想"
              icon="el-icon-info"
              icon-color="red"
              title="您确定取消订单吗？"
              @confirm="del(scope.row)"
            >
              <el-button type="danger" slot="reference" size="mini"
                >取消订单</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
  </div>
</template>
<script>
import router from "../../router";
import qs from "qs";
import jwt_decode from "jwt-decode";
export default {
  data() {
    return {
      userNickName: "",
      total: 0,
      pageNum: 1,
      pageSize: 3,
      checked: false,
      userinfo: { nickname: "", password: "", pho: "", add: "" },
      headerBg: "headerBg",
      tableData: [],
      user: "",
    };
  },

  mounted() {
    this.load();
    this.getNickAndAddress();
  },
  methods: {
    checkPassword1() {
      var newPass = this.password1;
      if (newPass == "") {
        this.$message.error("请输入密码");
        return;
      } else {
        var passPatt = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,15}$/;
        if (!passPatt.test(newPass)) {
          this.value = "";
          this.$message.error(
            "密码必须由数字、字母两种字符组成,长度在8-15位之间"
          );
          return false;
        }
        this.password1 = newPass;
        this.$message({
          message: "密码输入成功",
          type: "success",
        });
      }
    },
    //获取用户昵称和地址
    getNickAndAddress() {
      this.$axios
        .get("/user", {
          headers: {
            "x-access-token": localStorage.getItem("x-access-token"),
          },
        })
        .then((res) => {
          
          var resData = res.data.extend.nickName;
          this.userNickName = resData;
        });
    },

    //时间转换(js将 “2021-07-06T06:23:57.000+00:00” 转换为年月日时分秒)
    transformTimestamp(timestamp) {
      let a = new Date(timestamp).getTime();
      const date = new Date(a);
      const Y = date.getFullYear() + "-";
      const M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      const D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + "  ";
      const h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      const m =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      // const s = date.getSeconds(); // 秒
      const dateString = Y + M + D + h + m;
      // console.log('dateString', dateString); // > dateString 2021-07-06 14:23
      return dateString;
    },

    del(row) {
     
     var orderId=row.OrderId
     var goodsCount=row.goodsCount
     var goodsName=row.goods_name
     
     console.log(orderId+" "+goodsCount+" "+goodsName)
      this.request.delete("/orders/" + orderId+"/"+goodsCount+"/"+goodsName).then((res) => {
        console.log(res)
        if (res) {
          this.$message.success("取消订单成功");
          this.load();
        } else {
          this.$message.error("取消失败");
        }
      });
    },

    load() {
      this.$axios
        .get("/user/orderPage", {
          headers: {
            "x-access-token": localStorage.getItem("x-access-token"),
          },
        })
        .then((res) => {
          var resData = res.data.extend.result;
          console.log(resData);
          for (var i = 0; i < resData.length; i++) {
            resData[i].orderId = resData[i].OrderId;
            resData[i].orderPrice = resData[i].order_price + "元";
            resData[i].createTime = this.transformTimestamp(
              resData[i].create_time
            );
            if (resData[i].is_seckillorder == "1") {
              resData[i].is_seckillorder = "秒杀订单";
            }
            if (resData[i].is_seckillorder == "0") {
              resData[i].is_seckillorder = "普通订单";
            }
            if (resData[i].order_status == "1") {
              resData[i].orderStatus = "订单未支付";
            } else if (resData[i].order_status == "2") {
              resData[i].orderStatus = "订单异常";
            } else if (resData[i].order_status == "0") {
              resData[i].orderStatus = "订单已支付";
            }
          }

          this.tableData = resData;
        });
    },
    userOrder() {
      (this.nickName = this.userinfo.nickname),
        (this.phone = this.userinfo.pho),
        (this.address = this.userinfo.add);

      this.request
        .post(
          "/user/registUser?nickName=" +
            this.nickName +
            "&phone=" +
            this.phone +
            "&address=" +
            this.address +
            "&password=" +
            this.password
        )
        // .post("/user/registUser",params1)
        .then((res) => {
          alert("修改成功");
        });
    },
    gotoSeckill() {
      this.$axios
        .get("/seckill/gotoSeckillPage", {
          headers: {
            "x-access-token": localStorage.getItem("x-access-token"),
          },
        })
        .then((res) => {
          if (res.data.code == 200 && res.data.extend.result == "登陆成功") {
            router.push("./seckillpage/index");
          } else if (
            res.data.code == 401 &&
            res.data.extend.result == "用户不存在！"
          ) {
            this.$message.error("请先登录账号，才能参与秒杀活动");
          } else if (
            res.data.code == 401 &&
            res.data.extend.result == "token已过期，请重新登录"
          ) {
            this.$message.error("您已经很久没登录了，请重新登录");
          }
        });
    },
  },
};
</script>
<style>
#app {
  width: 100%;
  height: 100%;
}
.edit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  width: 25rem;
  height: 35.5rem;
  background-color: #fff;
  z-index: 100;
  border: 1px solid black;
  border-radius: 3.125rem;
}
.edit h1 {
  text-align: center;
  padding-top: 1.25rem;
  padding-bottom: 3.75rem;
}
.edit {
  /* position: relative; */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center; */
}
.shurukuang {
  display: flex;
  padding-bottom: 2.5rem;
}
.tijiao {
  position: absolute;
  bottom: 4.75rem;
  right: 2.25rem;
  width: 6.5rem;
  height: 2rem;
}
.toedit {
  position: absolute;
  top: 5.75rem;
  right: 28.25rem;
  width: 6.5rem;
  height: 2rem;
}
html {
  background: url("../../assets/img/bg.png") no-repeat;
  background-size: cover;
  /* background-color: aqua; */
  height: 100vh;
}
</style>